<template>
  <div class="statistics-box">
    <div class="statis-section section-left">
      <div class="line"></div>
      <div class="tit">Proportion of compounds for all features</div>
      <div class="demo-img">
        <pieChart
          :legend="pieChartData1.legend"
          :value="pieChartData1.value"
          :sum="pieChartData1.sum"
        />
      </div>
    </div>
    <div class="statis-section section-right">
      <div class="line"></div>
      <div class="tit">Numbers of endpoints for all toxicity</div>
      <div class="demo-img">
        <barChart :name="'chart01'" :xAxis="barChartData1.xAxis" :value="barChartData1.value" />
      </div>
    </div>
    <div class="statis-section section-left">
      <div class="line"></div>
      <div class="tit">Proportion of compounds for all features</div>
      <div class="demo-img">
        <pieChart
          :legend="pieChartData2.legend"
          :value="pieChartData2.value"
          :sum="pieChartData2.sum"
          :colors="colors2"
        />
      </div>
    </div>
    <div class="statis-section section-right">
      <div class="line"></div>
      <div class="tit">Kinds of each features domain types</div>
      <div class="demo-img">
        <barChart
          :xAxis="barChartData2.xAxis"
          :value="barChartData2.value"
          :itemStyle="itemStyle2"
        />
      </div>
    </div>
    <div class="statis-section section-left">
      <div class="line"></div>
      <div class="tit">Kinds of each features domain types</div>
      <div class="demo-img">
        <pieChart
          :legend="pieChartData1.legend"
          :value="pieChartData1.value"
          :sum="pieChartData1.sum"
        />
      </div>
    </div>
    <div class="statis-section section-right">
      <div class="line"></div>
      <div class="tit">Kinds of each features domain types</div>
      <div class="demo-img">
        <pieChart
          :legend="pieChartData1.legend"
          :value="pieChartData1.value"
          :sum="pieChartData1.sum"
        />
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from "@/components/pieChart.vue";
import barChart from "@/components/barChart.vue";
export default {
  components: {
    pieChart,
    barChart,
  },
  data() {
    return {
      pieChartData1: { value: [], legend: [], sum: 0 },
      pieChartData2: { value: [], legend: [], sum: 0 },
      barChartData1: { value: [], xAxis: [] },
      barChartData2: { value: [], xAxis: [] },
      colors2: [
        "#FE6A69",
        "#F54867",
        "#F5488B",
        "#FFCF30",
        "#FFAA53",
        "##FE9269",

        "#0080FE",
        "#8C78F7",
        "#F66664",
        "#FFEA21",
        "#B93DE0",
        "#1AB3FF",
        "#00D97C",
        "#EA518E",
        "#00E3FF",
      ],
      itemStyle2: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#60B7FF", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#2880FF", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        // barBorderRadius: [20, 20, 0, 0],
      },
    };
  },
  created() {
    this.getPieData();
  },
  methods: {
    getPieData() {
      this.$api.getToxicityCategory().then((res) => {
        let sum = 0;
        this.pieChartData1.value = res.map((item) => {
          sum = sum + item.compound_num;
          if (item.category.length > 20)
            item.category = item.category.slice(0, 20) + "...";
          return {
            value: item.compound_num,
            name: item.category,
          };
        });
        this.pieChartData1.sum = sum;
        this.pieChartData1.legend = res.map((item) => {
          // return item.category + (item.compound_num / sum).toFixed(2);
          if (item.category.length > 20)
            item.category = item.category.slice(0, 20) + "...";
          return item.category;
        });
        // 柱图
        this.barChartData1.xAxis = res.map((item) => {
          if (item.category.length > 4)
            item.category = item.category.slice(0, 4) + "...";
          return item.category;
        });
        this.barChartData1.value = res.map((item) => {
          return item.num;
        });
        // console.log(this.barChartData1,'this.barChartData1')
      });

      this.$api.getFeatureCategory().then((res) => {
        let sum = 0;
        this.pieChartData2.value = res.map((item) => {
          sum = sum + item.compound_num;
          if (item.category.length > 20)
            item.category = item.category.slice(0, 20) + "...";
          return {
            value: item.compound_num,
            name: item.category,
          };
        });
        this.pieChartData2.sum = sum;
        this.pieChartData2.legend = res.map((item) => {
          // return item.category + (item.compound_num / sum).toFixed(2);
          if (item.category.length > 20)
            item.category = item.category.slice(0, 20) + "...";
          return item.category;
        });
        // 柱图
        this.barChartData2.xAxis = res.map((item) => {
          if (item.category.length > 4)
            item.category = item.category.slice(0, 4) + "...";
          return item.category;
        });
        this.barChartData2.value = res.map((item) => {
          return item.num;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 93vw;
  max-width: 1340px;
  padding: 24px 0;
  margin-left: auto;
  margin-right: auto;
  .statis-section {
    position: relative;
    width: 49.4%;
    height: 360px;
    background-color: #fff;
    padding: 20px 16px;
    margin-bottom: 24px;
    .tit {
      font-size: 20px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
    }
    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
    }
    .demo-img {
      width: 100%;
      height: 80%;
      margin-top: 30px;
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .statistics-box {
    .statis-section {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      &:nth-child(5) {
        width: 95%;
        .demo-img {
          width: 100%;
          background-image: url("../assets/img/statis_demo1.jpg");
        }
      }
    }
  }
}
</style>
